<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    /*
      有一种误解,可能会认为最外层的滚动条在最外层的可识别标签元素上,也就是html元素
      但其实这个滚动条应该在浏览器视口上,html并不等于浏览器视口,但浏览器视口在css里却没有一个实体来表述(js里或许能用document.documentElement.clientWidth来表述,但document.documentElement的其它属性并不适用)
      你可以通过改变浏览器窗口的大小来直观感受,滚动条是存在于浏览器视口上这个事实
      你可以发现在本例中当浏览器视口(窗口)缩小到足够小,即小于我们first-div中字体内容所占据的内容宽度时,横向滚动条才会出现
      而不是立马会出现

      本例中我们将html的宽度置为了30px,而first-div里文字所占据的内容宽度早超出30px了,照理说滚动条是在html上,那么早应该出现了
      并且我们还能从横向滚动条的宽度可以发现,它并不等于30px,而是等于视口宽度

      故滚动条应该在浏览器视口上 而不是html上

      我们还可以从js的document.documentElement上印证这一点(看下方script里的例子)
    */
    html {
      width:30px;
      /** 注意这个最外层滚动条的overflow默认值并不像其它元素,它的默认值为auto*/
      /*overflow: auto;*/
    }
    body{
      margin:0;
    }
  </style>
</head>
<body>
<div class="first-div">111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
<div>17</div>
<div>18</div>
<div>19</div>
<div>20</div>
<div>21</div>
<div>22</div>
<div>23</div>
<div>24</div>
<div>25</div>
<div>26</div>
<div>27</div>
<div>28</div>
<div>29</div>
<div>30</div>
<div>31</div>
<div>32</div>
<div>33</div>
<div>34</div>
<div>35</div>
<div>36</div>
<div>37</div>
<div>38</div>
<div>39</div>
<div>40</div>
<div>41</div>
<div>42</div>
<div>43</div>
<div>44</div>
<div>45</div>
<div>46</div>
<div>47</div>
<div>48</div>
<div>49</div>
<div>50</div>

<script>
  const htmlEle = document.querySelector('html');
  console.log('document.querySelector(\'html\') === document.documentElement:',htmlEle === document.documentElement); // true

  console.log(document.documentElement.clientWidth)
  /*
    document.documentElement这个元素比较特殊
    虽然通过document.querySelector获取到的html元素 和 document.documentElement在js看来是等价的(clientLeft、offsetWidth等获取到的宽度的确和html在css样式表中设置的一样)
    但它的clientWidth获取到的数值是html包含块的数值 即浏览器视口(不含滚轴轨道宽度)
  */
</script>
</body>
</html>
